<template>
    <div class="message">
        <div style="
              line-height: 32px;
              font-size: 12px;
              color: #86909c;
              height: 300px;
              width: 100%;
            ">
            <div @click="showDetailDialog(item)" style="
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              " v-for="item in messageList" :key="item.id">
                <el-badge style="margin: 0 5px" :is-dot="item.is_read === '0'" :hit="true">
                    <el-tag :style="{
                        color: '#' + item.font_color + ' !important',
                        'background-color':
                            '#' + item.background_color + ' !important',
                        'border-radius': 0,
                        border: 'none !important',
                    }">{{
    item.type === "0" ? "通知" : item.type === "1" ? "预警" : ""
}}</el-tag>
                </el-badge>
                <span style=" line-height: 32px;">{{ item.body }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { reqMyMessagesList, reqMyMessagesDetail } from "@/api/message";

export default {
    name: 'message',
    components: {},
    props: [],
    data() {
        return {
            messageList: [],
        };
    },
    mounted() {
        this.getMessageList();
    },
    methods: {
        async getMessageList() {
            let res = await reqMyMessagesList({});
            this.messageList = res.data.data.slice(0, 9);
        },
        async showDetailDialog(val) {
            let res = await reqMyMessagesDetail({
                message_id: val.id,
            });
            if (res.data.jump_link) {
                this.$confirm(res.data.body, "消息通知", {
                    cancelButtonText: "关闭",
                    confirmButtonText: "去处理",
                    customClass: "dialogClass",
                })
                    .then(() => {
                        this.getMessageList();
                        window.open(res.data.jump_link, "_blank");
                        // this.$router.push({
                        //   path: res.data.jump_link,
                        //   query: { id: res.data.jump_id },
                        // });
                    })
                    .catch(() => {
                        this.getMessageList();
                    });
            } else {
                this.$alert(res.data.body, "消息通知", {
                    confirmButtonText: "关闭",
                    customClass: "dialogClass",
                    callback: (action) => {
                        this.getMessageList();
                    },
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.wrapper {}
</style>